<template>
  <div>
    <div class="mt-5">
      <a-form layout="inline" :model="searchForm" ref="searchFormRef">
        <a-form-item label="热力卡号" name="alipayConsNo">
          <a-input
            style="width: 200px"
            v-model:value="searchForm.alipayConsNo"
            placeholder="请输入热力卡号"
          />
        </a-form-item>
        <a-form-item label="住户名称" name="holder">
          <a-input
            style="width: 200px"
            v-model:value="searchForm.holder"
            placeholder="请输入住户名称"
          />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" :icon="h(SearchOutlined)" @click="onSearch"
            >查询</a-button
          >
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="onReset">重置</a-button>
        </a-form-item>
      </a-form>
    </div>
    <a-table
      :columns="columns"
      :data-source="dataSource"
      :row-class-name="
        (_record: any, index: number) =>
          index % 2 === 1 ? 'table-striped' : null
      "
      :pagination="pagination"
      bordered
      class="mt-5"
    >
      <template #footer>合计</template>
    </a-table>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, h } from "vue";
import { SearchOutlined, CodeSandboxOutlined } from "@ant-design/icons-vue";
import { getStopSupplyApi } from "#/api/core/charge";
import { message } from 'ant-design-vue';

const searchForm = reactive({
  // year: "",
  alipayConsNo: "",
  holder: "",
});
const props = defineProps({
  selectedNodeId: {
    type: Array,
    default: [],
  },
});
const searchFormRef = ref(null);
const pagination = reactive({
  total: 0,
  pageSize: 10,
  current: 1,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number) => `共 ${total} 条`,
  onChange: (page: number, pageSize: number) => {
    pagination.current = page;
    pagination.pageSize = pageSize;
    onSearch();
  },
});
const dataSource = ref([]);
const columns = [
  {
    title: "小区名称",
    dataIndex: "village",
    key: "village",
    align: "center",
    // width: 120,
  },
  {
    title: "用户地址",
    dataIndex: "houseAddress",
    key: "houseAddress",
    align: "center",
    // width: 150,
  },
  {
    title: "用户姓名",
    dataIndex: "holder",
    key: "holder",
    align: "center",
    // width: 100,
  },
  {
    title: "热力卡号",
    dataIndex: "alipayConsNo",
    key: "alipayConsNo",
    align: "center",
    // width: 120,
  },
  {
    title: "面积名称",
    dataIndex: "areaName",
    key: "areaName",
    align: "center",
    // width: 100,
  },
  {
    title: "收费面积",
    dataIndex: "feeArea",
    key: "feeArea",
    align: "center",
    // width: 100,
  },
  {
    title: "报停方式",
    dataIndex: "stopWay",
    key: "stopWay",
    align: "center",
    // width: 100,
  },
  {
    title: "停供年度",
    dataIndex: "year",
    key: "year",
    align: "center",
    // width: 100,
  },
  {
    title: "停供系数",
    dataIndex: "suspensionRate",
    key: "suspensionRate",
    align: "center",
    // width: 120,
  },
  {
    title: "停供原因",
    dataIndex: "stopReason",
    key: "stopReason",
    align: "center",
    // width: 120,
  },
];
const onSearch = async () => {
  if (props.selectedNodeId.length === 0) {
    message.error('请选择左侧树结构！');
    return;
  } else {
    const res = await getStopSupplyApi({
      page: pagination.current,
      limit: pagination.pageSize,
      treeData: props.selectedNodeId,
      ...searchForm,
    });
    console.log(res);
    dataSource.value = res.data;
    pagination.total = res.total;
  }
};
const onReset = () => {
  searchFormRef.value.resetFields();
};
</script>
<style scoped></style>
